<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"> 取消</text>
		  <text class="tabtext">我的收藏</text>
		  <text class="baocun" v-if="flas==1" @click="flas=0">管理</text>
      <text class="baocun" v-else @click="flas=1">完成</text>
		</view>
    <!-- 卡片视图 -->
    <view class="carlist">
      <view class="cara">
        <view class="caraimg">
          <image src="../img/tushu.png" mode=""></image>
        </view>
        <view class="caraconter">
          <view class="titlebiao">
        雅马哈钢琴YUS3-专业级别全新立式专业考级演奏初学者定制
    
          </view>
          <view class="fukuanhezi">
            <text class="money">￥13948</text>
            <text class="fukuan"> 316人付款</text>
          </view>
          
        </view>
      </view>
      
      <view class="cara">
        <view class="caraimg">
          <image src="../img/tushu.png" mode=""></image>
        </view>
        <view class="caraconter">
          <view class="titlebiao">
        雅马哈钢琴YUS3-专业级别全新立式专业考级演奏初学者定制
          
          </view>
          <view class="fukuanhezi">
            <text class="money">￥13948</text>
            <text class="fukuan"> 316人付款</text>
          </view>
          
        </view>
      </view>
      
      
      
    </view>
        
        
        <!-- 删除按钮 -->
        <view class="delebut">
          <image src="./img/dele.png" mode=""></image>
          <text>删除商品</text>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 管理按钮数据
        flas:0
			}
		},
		methods: {
			
		}
	}
</script>

<style>

 /* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
  background: url(../img/tabbar.png) no-repeat;
  background-size: cover;
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 37rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;
text-align: center;
 margin-left: 176rpx;
}
.baocun{
 
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #8DCE2A;
  line-height: 114rpx;
  float: right;
  margin-right: 36rpx;
  }
  /* 卡片视图 */
  .carlist {
    margin-top: 30rpx;
    margin-left: 31rpx;
  }
  .caraimg image{
    width: 221rpx;
    height: 221rpx;
  border-radius: 20rpx;
  }
  .cara {
    display: flex;
    margin-top: 30rpx;
  }
  .caraconter {
    padding-left: 30rpx;
    padding-top: 23rpx;
  }
  .titlebiao {
    width: 426rpx;
    height: 67rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #777777;
    line-height: 40rpx;

  }
  .fukuanhezi {
    padding-top: 55rpx;
  }
  .money {
    width: 90rpx;
    height: 26rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #EA3131;
    line-height: 30rpx;
    padding-right: 38rpx;

    }
    .fukuan {
      width: 114rpx;
      height: 23rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #AAAAAA;
      line-height: 30rpx;

    }
    /* 删除按钮 */
    .delebut {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 0rpx;
      width: 750rpx;
      height: 115rpx;
      background: #FFFFFF;
      box-shadow: 0px -10rpx 16rpx 0px rgba(0, 0, 0, 0.04);
      background-color: #FFFFFF;
    }
    .delebut image {
      width: 41rpx;
      height: 45rpx;
      padding-right: 24rpx;
    }
    .delebut text {
      width: 120rpx;
      height: 27rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #777777;
      line-height: 30rpx;

    }
</style>
